import React from 'react';
import { Layout, Typography, Card } from 'antd';
import { Button } from 'antd';
const { Content } = Layout;
const { Title, Text } = Typography;

const ButtonPage: React.FC = () => {
  return (
    <Content>
      <Card>
        <Title level={2}>Button 按钮</Title>
        <Text code>antd/lib/button</Text>
        <div style={{ marginTop: 20 }}>
          <div>
            <h2>基本按钮</h2>
            <div style={{ marginBottom: 16 }}>
              <Button type="primary">主要按钮</Button>
              <Button>次要按钮</Button>
              <Button type="dashed">虚线按钮</Button>
              <Button type="text">文字按钮</Button>
              <Button type="link">链接按钮</Button>
            </div>

            <h2>图形按钮</h2>
            <div style={{ marginBottom: 16 }}>
              <Button icon={<span>+</span>}>上传</Button>
              <Button>下载</Button>
            </div>

            <h2>按钮尺寸</h2>
            <div style={{ marginBottom: 16 }}>
              <Button size="large">大按钮</Button>
              <Button size="middle" style={{ marginLeft: 8 }}>
                默认按钮
              </Button>
              <Button size="small" style={{ marginLeft: 8 }}>
                小按钮
              </Button>
            </div>

            <h2>按钮形状</h2>
            <div>
              <Button shape="circle" icon={<span>+</span>} />
              <Button shape="round" icon={<span>+</span>} style={{ marginLeft: 8 }}>
                上传
              </Button>
              <Button shape="round" style={{ marginLeft: 8 }}>
                圆角按钮
              </Button>
            </div>
          </div>
        </div>
      </Card>
    </Content>
  );
};

export default ButtonPage;